<template>
  <div class="joe_container">
    <aside class="joe_aside" style="margin-right: 10px">
      <ul class="joe_header__slideout-count">
        <a-menu  mode="vertical" style="border-right: none">
          <a-menu-item key="1">
            <router-link to="/personalData">
              <a-icon type="user"/>
              个人资料
            </router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link :to="'/personalHome/'+this.name">
              <a-icon type="home"/>
              个人主页
            </router-link>
          </a-menu-item>
          <a-menu-item key="4">
            <router-link to="/myFavorites">
              <a-icon type="star"/>
              收藏夹
            </router-link>
          </a-menu-item>
          <a-menu-item key="5">
            <a href="/article/articleList">
              <a-icon type="file-text"/>
              内容管理
            </a>
          </a-menu-item>
        </a-menu>
      </ul>

      <section class="joe_aside__item tags" style="top: 60px;">
        <div class="joe_aside__item-title">
          <span class="text">评分</span>
          <span class="line"></span>
        </div>
        <div class="joe_aside__item-contain">
          <span class="text">对作者开发的博客打个分吧！</span>
          <ul class="score-ul">
            <li v-for="(item,index) in lis" @click="selectLi(index)" :class="{'select-li':current === index}">
              <svg-icon :icon-class="item.icon" class="svg-icon-"/>
              {{ item.name }}
            </li>
          </ul>
          <a-textarea
            v-model="scoreData.proposal"
            style="margin-bottom: 10px"
            placeholder="您的建议"
            :rows="3"
            allow-clear
          />
          <a-button block type="primary" @click="onclickScore">
            提交
          </a-button>
        </div>
      </section>
    </aside>
    <router-view
      :key="key()"
      :style="{minHeight: height + 'px'}"
    />
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'

export default {
  name: 'ArticlePersonal',
  data() {
    return {
      height: '',
      description: '个人中心',
      current: -1,
      lis: [
        {
          name: '非常满意',
          score: '100',
          icon: 'very-satisfied'
        }, {
          name: '满意',
          score: '75',
          icon: 'satisfied'
        }, {
          name: '一般',
          score: '50',
          icon: 'commonly'
        }, {
          name: '不满意',
          score: '25',
          icon: 'dissatisfied'
        }, {
          name: '非常不满意',
          score: '0',
          icon: 'very-dissatisfied'
        }
      ],
      scoreData: {},
      url: {
        saveOrUpdate: '/articleScore/saveOrUpdate',
        get: '/articleScore/get'
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  mounted() {
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height
    this.height = height - 160
    this.initScore()
  },

  methods: {
    key() {
      return this.$route.path
    },
    selectLi(index) {
      this.current = index
      this.scoreData.score = index
    },
    // 加载评分
    initScore() {
      getAction(this.url.get, {}).then(res => {
        if (res.success) {
          if (res.result) {
            this.scoreData = res.result
            this.current = res.result.score
          }
        }
      })
    },
    onclickScore() {
      postAction(this.url.saveOrUpdate, this.scoreData).then(res => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style>
.menu-div {
  width: 100%;
  padding: 0px
}

.score-div {
  background-color: white;
  width: 100%;
  padding: 10px 0px;
  margin-top: 20px
}

.ant-divider-horizontal {
  margin: 0px !important;
}

.ant-menu-item:hover {
  background-color: #e6f7ff;
}

.score-ul {
  margin-top: 10px;
}

.score-ul li {
  list-style: none;
  font-size: 14px;
  padding: 10px 0px;
  color: #DCDCDC;
}

.score-ul li:hover {
  cursor: pointer
}

.svg-icon {
  margin-right: 5px;
}

.svg-icon-:hover {
  transform: scale(1.4);
}

.svg-icon- {
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.6s;
}
</style>
<style lang="scss" scoped>

.select-li {
  color: #696969;

  .svg-icon {
    transform: scale(1.6);
  }
}
</style>
